<template>
  <div class="singer">
    <scroll
      :data="data"
      class="m-singer"
      :probeType="probeType"
      :listenScroll="listenScroll"
      @scroll="scroll"
      ref="listview"
    >
      <div>
        <ul class="singer-list">
          <li v-for="(group,index) in data" :key="index" ref="group">
            <h2 class="list-title">{{group.title}}</h2>
            <ul>
              <li @click="selectItem(item)" class="singer-box" v-for="item in group.items">
                <img v-lazy="item.img">
                <p>{{item.name}}</p>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </scroll>
    <ul class="let-list">
      <!-- 当ccurrentIndex与index相等的时候为li添加class=“current -->
      <li
      @touchstart="indexTouchstart" @touchmove.stop="indexTouchmove"
        v-for="(item,index) in llist"
        :key="index"
        :data-index="index"
        :class="{'current':currentIndex==index}"
      >{{item}}</li>
    </ul>
  </div>
</template>

<script>
import scroll from './scroll'
export default {
  created() {
    // 开启实时监听滚动事件
    (this.probeType = 3),
    // 记录索引列表点击与滑动位置
    (this.touch = {}),
    // 开启滚动监听
    (this.listenScroll = true),
    // scroll元素列表每个dom高度
    (this.hightList = [])
  },
  computed: {},
  data() {
    return {
      // 默认的scroll滚动距离
      scrollY: -1,
      // 默认的scroll列表索引位置
      currentIndex: 0
    }
  },
  props: {
    data: {
      type: Array,
      default: []
    },
    llist: {
      type: Array,
      default: []
    }
  },
  components: {
    scroll
  },
  methods: {
    selectItem(item) {
      this.$emit('select', item)
    },
    indexTouchstart(e) {
      // 获取点击到的列表索引
      let index = e.target.getAttribute('data-index')
      // 获取touch事件的点击位置
      let firstTouch = e.touches[0]
      // 点击位置的y轴坐标赋值给touch对象
      this.touch.y1 = firstTouch.pageY
      // 点击位置的索引值赋值给touch对象
      this.touch.index = index
      // 通过列表索引移动到对应的$refs.group列表的位置
      this.$refs.listview.scrollToElement(this.$refs.group[index], 0)
    },
    indexTouchmove(e) {
      let firstTouch = e.touches[0]
      this.touch.y2 = firstTouch.pageY
      // 通过滑动距离计算出需要移动到的group的索引值
      let delta =
        Math.floor((this.touch.y2 - this.touch.y1) / 12) +
        parseInt(this.touch.index)
      console.log(delta)
      this.$refs.listview.scrollToElement(this.$refs.group[delta], 0)
    },
    scroll(pos) {
      // pos:{x:num,y:num}scroll组件滚动的距离
      this.scrollY = pos.y
    },
    _calulateHight() {
      this.hightList = []
      let list = this.$refs.group
      let height = 0
      this.hightList.push(height)
      for (let i = 0; i < list.length; i++) {
        // 获取每个dom元素的高度
        height += list[i].clientHeight
        this.hightList.push(height)
      }
    }
  },
  watch: {
    data() {
      setTimeout(() => {
        this._calulateHight()
      }, 20)
    },
    scrollY(newY) {
      if (newY > 0) {
        this.currentIndex = 0
        return
      }
      for (let i = 0; i < this.hightList.length - 1; i++) {
        let height1 = this.hightList[i]
        let height2 = this.hightList[i + 1]
        if (!height2 || (-newY >= height1 && -newY < height2)) {
          this.currentIndex = i
          return
        }
      }
      this.currentIndex = this.hightList.length - 2
    }
  }
}
</script>

<style lang="scss" scoped>
.singer {
  position: fixed;
  width: 100%;
  bottom: 0;
  top: 78px;
}
.let-list {
  position: fixed;
  top: 25%;
  right: 2px;
  list-style: none;
  border-radius: 10px;
  height: 370px;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 0;
  width: 14px;
  color: rgba(255, 255, 255, 0.6);
  padding-top: 10px;
  li {
    text-align: center;
    font-weight: 300;
    font-size: 12px;
  }
  li.current {
    color: #ffcd32;
    font-weight: 400;
  }
}
.m-singer {
  position: relative;
  background-color: #222;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .list-fixed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  .singer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    .list-title {
      color: rgba(255, 255, 255, 0.6);
      font-size: 12px;
      height: 30px;
      line-height: 30px;
      background-color: #333;
      padding-left: 5%;
      margin: 0;
    }
    .singer-box {
      display: flex;
      justify-content: flex-start;
      height: 50px;
      padding-top: 3%;
      img {
        height: 100%;
        margin-left: 3%;
      }
      p {
        margin-left: 3%;
        color: rgba(255, 255, 255, 0.6);
        font-size: 12px;
        font-weight: 300;
        height: 25px;
        line-height: 25px;
      }
    }
  }
}
</style>
